import React from 'react';
import {parsePercent, safeMultiple} from '~/utils/number';
import CommonEchart from '../../../common/CommonEchart';

const tooltipCallback = (params = []) => {
    const tooltipList = params.map((chartItem, index) => {
        const {marker, name, seriesName, value} = chartItem;
        let result = '';
        if (index === 0) {
            result = `${name}<br/>${marker}${seriesName}: ${parsePercent(
                value
            )}`;
        } else {
            result = `<br/>${marker}${seriesName}: ${parsePercent(value)}`;
        }
        return result;
    });
    return tooltipList.join('');
};

const labelFormatter = (params = {}) => {
    const {value = ''} = params;
    return `${parsePercent(value)}`;
};

const extendOptions = {
    chartId: 'GoalBarChart',
    tooltip: {
        trigger: 'axis',
        formatter: tooltipCallback
    },
    legend: {
        // orient: 'vertical',
        left: 'left'
    },
    // revertXYAxis: true,
    yAxis: {
        common: {
            splitLine: {show: false},
            name: '',
            axisLabel: {
                show: true,
                formatter: value => `${safeMultiple(value, 100)}%`
            }
        }
    },
    grid: {
        show: false,
        left: '6%',
        right: '60px',
        bottom: '3%',
        containLabel: true
    },
    series: {
        common: {
            barMaxWidth: 30,
            barGap: '50%',
            // label: {show: true, position: 'top', formatter: labelFormatter},
            emphasis: {
                focus: 'series'
            }
        }
    }
};

const GoalBarChart = props => (
    <CommonEchart {...props} extendEchartsOptions={extendOptions} />
);

export default GoalBarChart;
